<template>
  <getComponent></getComponent>
  <!--  <Markdown :options="options">{{ md }}</Markdown>-->
</template>

<script setup lang="ts">
import {compiler, Options, Rule} from "markdown-to-jsx-vue3";
import {defineComponent, h, ref} from "vue";
import P from "./components/MP.vue";
import Markdown from "markdown-to-jsx-vue3";
import CodeBlock from "./components/markdown/renderers/CodeBlock.vue";
import CodeHighlight from "./components/CodeHighlight/CodeHighlight.vue";

// const md = `# AAA\n safdasdfasdfs`;
const md = `
# AAA
safdasdfasdfs

\`\`\`js
  console.log("Hello world!");
  const a = 1;
\`\`\`

\`asdfsa\`
`;

const options: Options = {
  overrides: {
    p: P,
    h1: P,
  },
  extendsRules: {
    codeBlock: {
      react(node, output, state) {
        return h(CodeHighlight, {
          modelValue: node.content, langs: ['javascript'], themes: ['vitesse-dark'], codeToHtmlOptions: {
            lang: 'javascript',
            theme: 'vitesse-dark'
          },
          lineNumbers: true,
        }, []);
      },
    },
    codeInline: {
      react(node, output, state) {
        return h("code", {class: "aa"}, [node.content]);
      },
    },
  },
};

const getComponent = () => compiler(md, options);
</script>
